<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <link rel="stylesheet" href="./css/canvas.min.css">
</head>

<body>
    <div class="canvasBox"></div>
    <h3>绘画记录</h3>
    <div class="rec" style="word-wrap: break-word;word-break: normal;user-select: text;"></div>
    <script src="./data/brush.js"></script>
    <script src="./data/smile.js"></script>
    <script>
        window.onload = function () {
            class Canvas {
                constructor({ parent, brush, mapSmile }) {
                    this.parent = parent;
                    this.brush = brush;
                    this.record = mapSmile;
                    this.svgOffset = 18;
                    this.init();
                    if (this.record.length > 0) this.btnRecord.onclick();
                };
                init() {
                    this.all = document.createElement("div");
                    this.box = document.createElement("div");
                    this.box.classList.add("box");
                    this.mask = document.createElement("div");
                    this.mask.classList.add("mask");
                    this.box.appendChild(this.mask);
                    this.canvas = document.createElement("canvas");
                    this.box.appendChild(this.canvas);
                    let pack = document.createElement("div");
                    pack.classList.add("pack");
                    this.button = document.createElement("div");
                    this.button.classList.add("btn");
                    this.button.innerHTML = "清空记录";
                    pack.appendChild(this.button);
                    this.btnRecord = document.createElement("div");
                    this.btnRecord.classList.add("btn");
                    this.btnRecord.innerHTML = "重画记录";
                    pack.appendChild(this.btnRecord);
                    this.box.appendChild(pack);
                    this.addEvent();
                    this.all.appendChild(this.box);
                    this.parent.appendChild(this.all);
                    setTimeout(() => {
                        this.resize(this);
                    }, 0)
                };
                resize(self) {
                    window.onresize = () => {
                        const parentStyle = getComputedStyle(this.parent, null);
                        let width = Number.parseInt(parentStyle.width),
                            height = Number.parseInt(parentStyle.height);
                        let scale = width / 1200;
                        this.box.style.transform = `scale(${scale})`;
                        this.all.style.width = parseInt(getComputedStyle(this.box, null).width) * scale + "px";
                        this.all.style.height = parseInt(getComputedStyle(this.box, null).height) * scale + "px";
                    }
                    window.onresize();
                };
                addEvent() {
                    this.canvas.width = 1200;
                    this.canvas.height = 600;
                    this.mask.style.height = 600 + "px";
                    this.ctx = this.canvas.getContext("2d");
                    let cat = false;
                    let x = 0,
                        y = 0;
                    this.mask.onmouseenter = e => {
                        this.svgBox = document.createElement("div");
                        this.svgBox.style.left = e.offsetX - 2 + "px";
                        this.svgBox.style.top = e.offsetY - this.svgOffset + "px";
                        this.svgBox.classList.add("svgBox");
                        this.svgBox.innerHTML = `${this.brush}`;
                        this.box.appendChild(this.svgBox);

                    };
                    this.mask.addEventListener('mousemove', e => {
                        e.stopPropagation();
                        this.svgBox.style.left = e.offsetX - 2 + "px";
                        this.svgBox.style.top = e.offsetY - this.svgOffset + "px";
                        if (!cat) return;
                        this.ctx.fillStyle = "red";
                        this.ctx.moveTo(x, y);
                        this.ctx.lineTo(e.offsetX, e.offsetY);
                        this.ctx.stroke();
                        x = e.offsetX;
                        y = e.offsetY;
                        this.record.push([x, y]);
                    }, true)
                    this.mask.onmouseleave = () => {
                        this.svgBox.remove();
                        cat = false;
                        this.record.push("break");
                    }
                    this.mask.onmousedown = function (e) {
                        x = e.offsetX;
                        y = e.offsetY;
                        cat = true;
                    }
                    this.mask.onmouseup = (e) => {
                        e.preventDefault();
                        cat = false;
                        this.record.push("break");
                    }
                    function redraw(self) {
                        self.ctx.beginPath();
                        self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
                        self.ctx.closePath();
                    }
                    this.button.onclick = () => {
                        this.record = [];
                        redraw(this);
                    }
                    this.btnRecord.onclick = () => {
                        redraw(this);
                        this.ctx.fillStyle = "red";
                        let cat = [...this.record];
                        this.record = [];
                        [].forEach.call(cat, (value, index) => {
                            if (value == "break") return;
                            setTimeout(() => {
                                this.ctx.moveTo(value[0], value[1]);
                                if (++index != cat.length) {
                                    this.ctx.lineTo(cat[index][0], cat[index][1]);
                                }
                                this.ctx.stroke();
                            }, 10 + index * 10);
                        });
                        document.getElementsByClassName("rec")[0].textContent = cat;
                        setTimeout(() => {
                            this.record = cat;
                        }, 0);
                    }
                }
            }
            new Canvas({ parent: document.getElementsByClassName("canvasBox")[0], brush, mapSmile });
            document.documentElement.scrollTop = 0;
        };
    </script>
</body>

</html>